<!--
 * @Author: LiuYan
 * @Date: 2022-10-22 18:14:47
 * @LastEditors: LiuYan
 * @LastEditTime: 2022-10-22 18:27:21
 * @Description: 
-->
<template>
  <div class="bar" ref="barRef"></div>
</template>
<script setup>
import { onBeforeUnmount, reactive, ref, nextTick } from "vue";
import ech from "../plugins/echarts";
const barRef = ref(null);
class Bar {
  constructor() {
    this.data = reactive({});
    this.initBar();
  }
  initBar() {
    nextTick(() => {
      const chart = ech.init(barRef.value);
      /** @type EChartsOption */
      let options = {
        title: {
          text: "在此项目正确使用echarts",
          left: "center",
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };
      chart.setOption(options);
      window.addEventListener("resize", () => {
        chart.resize();
      });
    });
  }
}
let bar = new Bar();
onBeforeUnmount(() => {
  bar = null;
});
</script>
<style lang="less" scoped>
.bar {
  height: 400px;
  width: 800px;
}
</style>
